<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>layout布局</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
		<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css" />
		<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css" /> e
		<!-- 引入 ztree -->
		<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" />
		<script type="text/javascript">
			$(function() {
				$("#dianwo").click(function() {
					$("#tianjia").tabs('add', {
						title: "床纸播客",
						content: "叫所欲人",
						closable: "true",

					});
				});
				$("#aabb").click(function() {
					$("#tianjia").tabs('add', {
						title: "非诚莫上",
						content: "欲仙欲死",
						closable: "true"
					});
				});
				/*开启简单数据格式支持*/
				var setting = {
					data: {
						simpleData: {
							enable: true //支持简单json数据格式
						}
					},
					callback: {
						onClick: function(event, treeId, treeNode, clickFlag) {
							/*	alert(treeNode.page);*/
							/*添加选项卡*/
							$("#tianjia").tabs('add', {
								title: treeNode.name,
								content: '<iframe src=' + treeNode.page + ' style="width:100%;height:100%"></iframe>',
								/*这里style前面必须有个空格*/
								closable: "true"

							});
						}
					}
				};
				var nodes = [
					{ id: 1, pId: 0, name: "父节点1" },
					{ id: 11, pId: 1, name: "京东", page: "http://www.jingdong.com" },
					{ id: 12, pId: 1, name: "子节点2" },
					{ id: 2, pId: 0, name: "父节点2" },
					{ id: 21, pId: 2, name: "百度", page: "http://www.baidu.com" },
					{ id: 22, pId: 2, name: "子节点4" }
				];
				$.fn.zTree.init($("#shu"), setting, nodes);

			});
		</script>
	</head>

	<body class="easyui-layout">
		<div data-options="region:'north',title:'床纸博客官网商城'" style="height: 100px">北部区域</div>
		<div data-options="region:'south'" style="height: 60px">南部区域</div>
		<div data-options="region:'east'" style="width: 50px;">东部区域</div>
		<div data-options="region:'west'" title="菜单导航" style="width: 200px;">
			<!--添加面板-->
			<div class="easyui-accordion" data-options="fit:true">
				<div data-options="title:'基础菜单'">
					<div>
						<a href="javascript:void(0)" id="dianwo">点点我</a>
					</div>
					<div>
						<a href="javascript:void(0)" id="aabb">摸摸我</a>
					</div>
				</div>
				<div data-options="title:'系统菜单'">
					<!--树插件制作菜单-->
					<ul class="ztree" id="shu"></ul>
				</div>
			</div>
		</div>
		<div data-options="region:'center'">
			<div id="tianjia" class="easyui-tabs" data-option="fit:true,boder:false">
				<div title="面板选项卡1" closable="true"></div>
				<div title="面板选项卡2" closable="true"></div>
			</div>
		</div>
	</body>

</html>